<template>
<div id="echart"></div>
</template>

<script>
import {
    onMounted,
    getCurrentInstance,
    reactive
} from "vue";
export default {
    name: "v-charts",
    props: {
        options: {
            type: Object,
            required: true
        }
    },
    setup(props) {
        const {
            $echarts
        } = getCurrentInstance().appContext.config.globalProperties;
        onMounted(() => {
            const container = document.getElementById("echart");
            container.style.width = container.parentNode.offsetWidth + "px";
            container.style.height = container.parentNode.offsetHeight + "px";
            let chart = $echarts.init(container);
            chart.setOption(props.options)
        });
    }
}
</script>

<style lang="scss" scoped>
</style>
